<!--字典项页-->
<template>
  <div class="view">
    <span class="view-title">字典项管理</span>
    <el-button @click="goBack" type="primary" class="title-right-button">返回</el-button>
  </div>
  <!-- 字典项搜索卡片 -->
  <el-card class="search-card">
    <el-form :inline="true">
      <el-form-item label="字典项名称">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.label"
                  @keydown.enter.prevent="selectDictOption"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="selectDictOption">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="table-card">
    <div style="margin:10px 0px 40px 10px;">
      字典项列表
      <el-button type="primary" class="title-right-button" @click="handleCreate">新增字典项</el-button>
    </div>
    <el-table :data="dictOptionArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="label" label="字典项名称" align="center"/>
      <el-table-column prop="value" label="字典项值" align="center"/>
      <el-table-column prop="sort" label="字典项排序" align="center"/>
      <el-table-column prop="remark" label="备注信息" align="center" width="320"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editDictOption(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteDictOption(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 保存字典项弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" class="dialog"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="字典项名称">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.label"></el-input>
      </el-form-item>
      <el-form-item label="字典项值">
        <el-input placeholder="请输入" :disabled="saveDictOptionForm.id != null" v-model="saveDictOptionForm.value"></el-input>
      </el-form-item>
      <el-form-item label="字典项排序">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveDictOption">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

//获取传过来的值
const dictId = new URLSearchParams(window.location.search).get('id');
const goBack = () => {
  router.push('dict');
}
onMounted(() => {
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL + '/v1/dictOption/select?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          dictOptionArr.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
});
const searchForm = ref({dictId: dictId, label: ''});
const dictOptionArr = ref([]);
const selectDictOption = () => {
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL + '/v1/dictOption/select?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          dictOptionArr.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
}
const resetSearch = () => {
  searchForm.value = {dictId: dictId, label: ''};
}
const handleClose = () => {
  ElMessageBox.confirm(
      '数据将不会保存,确认离开吗?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        dialogVisible.value = false;
        saveDictOptionForm.value = {dictId: dictId, label: '', value: '', sort: '', remark: ''}
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '操作取消',
        })
      })
}
const dialogVisible = ref(false);
const saveDictOptionForm = ref({
  dictId: dictId, label: '', value: '', sort: '', remark: ''
});
const dialogTitle = ref('新增字典项');
const handleCreate = () => {
  saveDictOptionForm.value = {dictId: dictId};
  dialogTitle.value = '新增字典项';
  dialogVisible.value = true;
}
//保存字典项
const saveDictOption = () => {
  let data = qs.stringify(saveDictOptionForm.value);
  console.log(saveDictOptionForm.value);
  axios.post(BASE_URL + '/v1/dictOption/save', data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          selectDictOption();
        } else {
          ElMessage.error(response.data.msg);
        }
      });
}
//修改字典项
const editDictOption = (id) => {
  dialogTitle.value = '修改字典项';
  dialogVisible.value = true;
  let data = qs.stringify({dictId: dictId, id: id});
  axios.get(BASE_URL + '/v1/dictOption/selectDictOption?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          console.log(response.data.data);
          saveDictOptionForm.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
}

const deleteDictOption = (id) => {
  ElMessageBox.confirm(
      '删除后不可恢复,确认删除吗?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post(BASE_URL + '/v1/dictOption/delete/' + id)
            .then((response) => {
              if (response.data.code == 2000) {
                ElMessage.success('删除成功');
                selectDictOption();
              } else {
                ElMessage.error(response.data.msg);
              }
            });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '操作取消',
        })
      })
}
</script>

<style scoped>
.view {
  height: 4vh;
  padding: 5px 20px;
  background-color: #fff;
}

.view-title {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
}

.title-right-button {
  float: right;
  margin-top: -3px;
}

.dialog {
  width: 1000px;
  padding: 40px;
}

.search-card {
  margin: 20px;
  height: 70px;
}

.table-card {
  margin: 20px;
}
</style>